قوائم html جاهزة بانواع مختلفة واحترافية

القوائم بلغة html شي مهم للمدونين ومصممي مواقع الويب ولا بد من تعلمها وقد قمنا في هذه المشاركة بذكر انواع القوائم مع تطبيق عملي داخل المشاركة لكل نوع 

في مشاركات سابقة ذكرنا ماهي لغة html في شرح مبسط وذكرنا كيفية عمل ايقونات بلغة html ايضا ذكرنا اهم كتب تعليم لغة html وطريقة اضافة اكواد الوان بلغة html وهذه اساسيات في تعلم لغة html ودرسنا اليوم عن قوائم html جاهزة للتصميم وادراجها في موقعك الالكتروني

 تنقسم القوائم الى ثلاثة اقسام :

1. قوائم مرتبة ordered lists
2. قوائم غير مرتبة unordered lists
3. قوائم تعريفية definition lists

لاحظ اننا استخدمنا النوع الاول في ترتيب القوائم بالاعلى وهي قوائم مرتبة حسب ارقام تصاعدية 

نماذج قوائم html جاهزة

سنذكر انواع قوائم html كل نوع على حدة مع تطبيق عملي داخل المشاركة لكل نوع 

النوع الاول : قوائم مرتبة ordered lists

وهي قوائم تبدأ بالوسم <ol> وتنتهي بالوسم <ol/> وبين هذه الوسمين لكل عنصر وسم خاص يبدأ به وينتهي به مثل 

<li> عنصر القائمة </li>

هل تريد الوسم المستخدم في القائمة بالاعلى كاملا ؟ لا عليك ها هو ذا امامك 

<ol>

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ol>

---

النوع الثاني : قوائم غير مرتبة unordered lists

وهي قوائم تاتي على شكل نقاط وليست مرقمة مثل النوع الاول وهي قوائم تبدأ بالوسم <ul> وتنتهي بالوسم <ul/> وبين هذه الوسمين لكل عنصر وسم خاص يبدأ به وينتهي به مثل 

<li> عنصر القائمة </li> 

وهنا مثال نقدمه عن هذا النوع والكود المستخدم في عمل هذه القائمة 

• عنصر القائمة 1
• عنصر القائمة 2
• عنصر القائمة 3

وهذا الكود المستخدم لعمل هذه القائمة بالاسفل

<ul>

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ul>

---

النوع الثالث : القوائم التعريفية definition lists

وهي القوائم التعريفية التي ياتي فيها عنصر ويتبعه الشرح الخاص به 

تبدا هذه القائمة بالوسم <dl> وتنتهي بالوسم <dl/>

وسم العنوان المراد شرحه داخل القائمة يكون وسمه هكذا 

<dt>العنوان 1</dt>

الشرح الخاص به يكون وسمه هكذا 

<dd>شرح العنوان رقم 1 </dd>

اما شكل وسم القائمة كاملا فيكون هكذا كما يوجد في هذا المثال بالاسفل  

 <dl>

<dt>العنوان 1 </dt>

<dd> شرح العنوان 1 </dd>

<dt> العنوان 2  </dt>

<dd>شرح العنوان  2 </dd>

<dt> العنوان 3 </dt>

<dd>شرح العنوان 3 </dd>

</dl>

وهنا مثال تطبيقي يبين شكل هذا النوع من القوائم 

العنوان 1

شرح العنوان 1

العنوان 2

شرح العنوان 2

العنوان 3

شرح العنوان 3

---

اشكال اخرى لـ قوائم html جاهزة

ما رأيك بعمل قائمة داخل قائمة اخرى في شكل فني رهيب اذا كنا مثلا نريد عمل عدة عناصر وداخل احد هذه العناصر يوجد عدة عناصر متفرعة هنا نحن بحاجة الى هذه القائمة 

قائمة html جاهزة داخل قائمة اخرى

<ol>

<li> عنصر القائمة 1  </li>

<li> عنصر القائمة 2 </li>

<ul>

<li> عنصر متفرع للقائمة 2  </li>

<li> عنصر متفرع للقائمة 2  </li>

</ul>

<li>عنصر القائمة  3 </li>

<li>عنصر القائمة  3 </li>

</ol>

ويكون شكلها عند التطبيق هكذا 

1. عنصر القائمة 1
2. عنصر القائمة 2
• عنصر متفرع للقائمة 2
• عنصر متفرع للقائمة 2
3. عنصر القائمة 3
4. عنصر القائمة 3

قوائم مرقمة بترقيم مختلف ويستخدم فيه النوع الاول من القوائم المرتبه مع اضافة النوع المطلوب مع الخاصية type

---

قوائم تبداء بترقيم انجليزي حرف كبير 

يتم ذلك بإضافة الخاصية "A" الى type

<ol type="A">

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ol>

1. عنصر القائمة 1
2. عنصر القائمة 2
3. عنصر القائمة 3

---

قوائم تبداء بترقيم روماني

وذلك يتم عندما  نضيف الخاصية 

type="i"

<ol type="i">

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ol>

1. عنصر القائمة 1
2. عنصر القائمة 2
3. عنصر القائمة 3

---

قوائم تبدأ ترقيمها بدائرة فارغة

وذلك يتم  باضافة الخاصية circle

<ul type="circl">

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ul>

• عنصر القائمة 1
• عنصر القائمة 2
• عنصر القائمة 3

---

قوائم تبدأ ترقيمها بمربع صغير 

وذلك باضافة الخاصية square كما في المثال بالاسفل 

<ul type="square">

<li> عنصر القائمة 1</li>

<li> عنصر القائمة 2 </li>

<li> عنصر القائمة 3 </li>

</ul>

• عنصر القائمة 1
• عنصر القائمة 2
• عنصر القائمة 3

كانت هذه بعض قوائم html جاهزة للتصميم في المواقع الالكترونية يمكنكم استخدامها اعزائي المتابعين وتعلم كيفية تصميمها 

---

ملاحظة:

اذا ضهرت ايقونة النجمة الصفراء قبل عناصر القائمة فلا تقلق لان هذه اضافة قمت بعملها قبل بعض عناصر القوائم داخل القالب الخاص بي 

تحياتنا لكم اعزائي المتابعين نأمل ان تكونوا قد استفدتم من هذه المشاركة

شاركونا رأيكم في التعليقات 

تحياتنا لكم